<template>
  <q-tab-panels
    animated
    v-model="panel"
    class="video-uploader"
    :style="isMaximized ? 'width: 100%;height: 100%' : 'width:600px;height:614px;'"
  >
    <q-tab-panel name="step1" style="padding:0px;">
      <step-one @minimize="onMinimize" @maximize="onMaximize" @next="showStep2" />
    </q-tab-panel>
    <q-tab-panel name="step2" style="padding:0px;">
      <step-two
        @minimize="onMinimize"
        @maximize="onMaximize"
        @next="showStep3"
        :file="selectedFile"
      />
    </q-tab-panel>
    <q-tab-panel name="step3" style="padding:0px;">
      <step-three @minimize="onMinimize" @maximize="onMaximize" @next="showStep4" />
    </q-tab-panel>
    <q-tab-panel name="step4" style="padding:0px;">
      <step-four @minimize="onMinimize" @maximize="onMaximize" @finish="finish" />
    </q-tab-panel>
  </q-tab-panels>
</template>
<script lang="ts">
import { defineComponent, ref, Ref } from 'vue';
import StepOne from './videouploader/StepOne.vue';
import StepTwo from './videouploader/StepTwo.vue';
import StepThree from './videouploader/StepThree.vue';
import StepFour from './videouploader/StepFour.vue';
export default defineComponent({
  props: {
    isMaximized: {
      type: Boolean,
    },
  },
  components: { StepOne, StepTwo, StepThree, StepFour },
  emits: ['minimize', 'maximize', 'finish'],
  setup (props, { emit }) {
    const panel = ref('step1');
    const selectedFile: any = ref(null);
    const showStep1 = () => {
      panel.value = 'step1';
    };
    const showStep2 = (file: File) => {
      panel.value = 'step2';
      selectedFile.value = file;
    };
    const showStep3 = () => {
      panel.value = 'step3';
    };
    const showStep4 = () => {
      panel.value = 'step4';
    };
    const finish = () => {
      emit('finish');
    };
    return {
      panel,
      selectedFile,
      onMinimize () {
        emit('minimize');
      },
      onMaximize () {
        emit('maximize');
      },
      showStep1,
      showStep2,
      showStep3,
      showStep4,
      finish,
    };
  },
});
</script>
<style lang="sass" scoped>

.video-uploader
  min-width: 600px
  min-height: 614px
  background-color: #1E1E1E
  padding: 0px !important
  overflow: hidden
</style>s